<template>
  <!-- 
      category3Id:61
      createTime:"2022-09-06 15:08:31"
      id:610
      isSale:0
      price:11
      skuAttrValueList:null
      skuDefaultImg:""
      skuDesc:"1"
      skuImageList:null
      skuName:"111"
      skuSaleAttrValueList:null
      spuId:916
      tmId:491
      weight:"11.00"
     -->
  <el-card shadow="hover" :body-style="{ padding: '20px' }">
    <el-table border stripe :data="recordsList">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" alt="" width="120" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" width="300">
        <template v-slot="{ row }">
          <el-button
            v-if="row.isSale === 0"
            size="small"
            type="info"
            title="上架"
            icon="ele-Top"
            @click="onSale(row)"
          ></el-button>
          <el-button
            v-else
            size="small"
            type="success"
            title="下架"
            icon="ele-Bottom"
            @click="downSale(row)"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            title="修改"
            icon="ele-Edit"
            @click="ElMessage.info('正在开发中')"
          ></el-button>
          <el-button
            size="small"
            type="info"
            title="详情"
            icon="ele-InfoFilled"
            @click="openDrawer(row)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            title="删除"
            icon="ele-Delete"
            @click="deleteSku(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:page-size="limit"
      v-model:current-page="page"
      :page-sizes="[10, 15, 20]"
      :pager-count="5"
      layout="prev, pager, next,sizes"
      :total="total"
      background
    />
  </el-card>
  <!-- 抽屉 -->
  <el-drawer
    v-model="drawer"
    title="I am the title"
    :with-header="false"
    direction="ltr"
    size="50%"
  >
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        名称:</el-col
      >
      <el-col :span="20"
        ><div class="grid-content ep-bg-purple-light" />
        {{ details.skuName }}</el-col
      >
    </el-row>
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        描述:</el-col
      >
      <el-col :span="20"
        ><div class="grid-content ep-bg-purple-light" />
        {{ details.skuDesc }}</el-col
      >
    </el-row>
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        价格:</el-col
      >
      <el-col :span="20"
        ><div class="grid-content ep-bg-purple-light" />
        {{ details.price }}</el-col
      >
    </el-row>
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        品牌属性:</el-col
      >
      <el-col :span="20" v-for="attr in details.skuAttrValueList" :key="attr.id"
        ><div class="grid-content ep-bg-purple-light" />
        <el-tag type="success" size="small" effect="plain"
          >{{ attr.attrName }}-{{ attr.valueName }}</el-tag
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        销售属性:</el-col
      >
      <el-col
        :span="20"
        v-for="sale in details.skuSaleAttrValueList"
        :key="sale.id"
        ><div class="grid-content ep-bg-purple-light" />
        <el-tag type="success" size="small" effect="plain"
          >{{ sale.saleAttrName }}-{{ sale.saleAttrValueName }}</el-tag
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple" />
        商品图片:</el-col
      >
      <el-col :span="20"
        ><div class="grid-content ep-bg-purple-light" />
        <el-carousel indicator-position="outside">
          <el-carousel-item
            v-for="item in details.skuImageList"
            :key="item.id"
            height="400px"
          >
            <img :src="item.imgUrl" height="300" width="300" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import {
  requestcancelSale,
  requestDeleteSku,
  requestFindById,
  requestOnSale,
  requestSkuList,
  type SkuInfoItemType,
  type SkuInfoListType,
} from "@/api/sku";
//定义页码初始值
const page = ref(1);
const limit = ref(5);
const total = ref(10);

//定义一个数据用来保存分页列表数据
const recordsList = ref<SkuInfoListType>([]);
//封装一个函数用来请求sku分页列表
const getPageList = async () => {
  const result = await requestSkuList(page.value, limit.value);
  //保存数据
  recordsList.value = result.records;
  total.value = result.total;
};
//初始化操作
onMounted(() => {
  getPageList();
});

//监听页码的改变发送请求
watch(
  [page, limit],
  () => {
    //发送分页请求
    getPageList();
  },
  { immediate: true }
);

//上架事件函数
const onSale = async (row: SkuInfoItemType) => {
  await requestOnSale(row.id as number);
  ElMessage.success("上架成功");
  getPageList();
};
//下架事件函数
const downSale = async (row: SkuInfoItemType) => {
  await requestcancelSale(row.id as number);
  ElMessage.success("下架成功");
  getPageList();
};
//删除某个sku
const deleteSku = async (row: SkuInfoItemType) => {
  await requestDeleteSku(row.id as number);
  ElMessage.success("删除成功");
  getPageList();
};

//定义一个数据用来控制抽屉
const drawer = ref(false);
//定义一个数据用来保存请求回来的详细数据

const details = ref<SkuInfoItemType>({
  skuName: "",
  skuDesc: "",
  price: 0,
  weight: "",
  skuDefaultImg: "",
  category3Id: null,
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuImageList: [],
});
//点击详情事件函数
const openDrawer = async (row: SkuInfoItemType) => {
  drawer.value = true;
  //发送请求
  try {
    const result = await requestFindById(row.id as number);
    console.log(result);

    details.value = result;
  } catch (e) {
    ElMessage.error("请求详细信息失败");
  }
};
</script>
